<template>
  <div>
    <div class="page-title">HSE录入问题管理</div>
    <div class="page-content">
      <el-form :model="filterQuery" inline>
        <el-form-item label="审核区域">
          <treeselect
            :options="companyTree"
            placeholder="请选择审核区域"
            v-model="filterQuery.companyCode"
            style="width: 150px"
          ></treeselect>
        </el-form-item>
        <el-form-item label="审核时间">
          <el-date-picker
            v-model="filterQuery.startDate"
            value-format="yyyy-MM-dd"
            placeholder="开始时间"
            style="width: 150px"
          >
          </el-date-picker>
          <span>-</span>
          <el-date-picker
            v-model="filterQuery.endDate"
            value-format="yyyy-MM-dd"
            placeholder="结束时间"
            style="width: 150px"
          ></el-date-picker>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch()"
          >查询</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="handleBatchDelect()"
          >批量删除</el-button
        >
        <el-button
          type="success"
          icon="el-icon-upload2"
          @click="handleBatchSubmit()"
          >批量提交</el-button
        >
      </el-form>

      <el-table
        :data="table"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline label-width="120px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="检查人：">{{
                    props.row.responsePersonName
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="受检二级单位：">{{
                    props.row.parentCompanyName
                  }}</el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="受检基层单位：">{{
                    props.row.basicCompanyName
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="受检单位：">{{
                    props.row.companyName
                  }}</el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="轮次：">{{
                    props.row.round
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="审核时间：">{{
                    props.row.auditTime
                  }}</el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="审核主题：">{{
                    props.row.auditSubject
                  }}</el-form-item>
                </el-col>
                <el-row>
                  <el-col>
                    <el-form-item label="审核项：">{{
                      props.row.auditItem
                    }}</el-form-item>
                  </el-col>
                </el-row>
              </el-row>

              <el-row>
                <el-col>
                  <el-form-item label="审核内容：">{{
                    props.row.auditContent
                  }}</el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col>
                  <el-form-item label="判定依据:">{{
                    props.row.judgmentBasis
                  }}</el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="问题级别：">{{
                    props.row.questionLevel
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="原因分析：">{{
                    props.row.causeAnalysis
                  }}</el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="隐患级别：">{{
                    props.row.problemLevel
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="审核类别：">{{
                    props.row.classify
                  }}</el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="整改建议：">{{
                    props.row.rectificationSuggestions
                  }}</el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="责任人：">{{
                    props.row.responsePersonName
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="整改责任人：">{{
                    props.row.rectPersonName
                  }}</el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="扣分：">{{
                    props.row.lostScore
                  }}</el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="4">
                <el-form-item label="检查图片：">
                  <el-col :span="6">
                    <span v-if="!props.row.checkAttach1">暂无检查图片</span>
                    <el-image
                      v-else
                      style="width: 80%; height: 50%"
                      :src="props.row.checkAttach1"
                      fit="contain"
                    ></el-image>
                  </el-col>
                  <el-col :span="6">
                    <span v-if="!props.row.checkAttach1">暂无检查图片</span>
                    <el-image
                      v-else
                      style="width: 80%; height: 50%"
                      :src="props.row.checkAttach2"
                      fit="contain"
                    ></el-image>
                  </el-col>
                  <el-col :span="6">
                    <span v-if="!props.row.checkAttach1">暂无检查图片</span>
                    <el-image
                      v-else
                      style="width: 80%; height: 50%"
                      :src="props.row.checkAttach3"
                      fit="contain"
                    ></el-image>
                  </el-col>
                  <el-col :span="6">
                    <span v-if="!props.row.checkAttach1">暂无检查图片</span>
                    <el-image
                      v-else
                      style="width: 80%; height: 50%"
                      :src="props.row.checkAttach4"
                      fit="contain"
                    ></el-image>
                  </el-col>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="问题视频：">
                  <span v-if="!props.row.checkVideo">暂无视频记录</span>
                  <video
                    v-else
                    controls
                    preload="none"
                    width="60%"
                    height="40%"
                    :src="props.row.checkVideo"
                  ></video>
                </el-form-item>
              </el-row>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          type="selection"
          :selectable="isSelect"
        ></el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="审核时间" prop="auditTime"> </el-table-column>
        <el-table-column label="审核区域" prop="companyName"></el-table-column>
        <el-table-column label="审核类别" prop="classify"></el-table-column>
        <el-table-column
          label="审核主题"
          prop="auditSubject"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="问题状态" prop="status"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == '暂存'"
              type="warning"
              size="small"
              @click="handleEdit(scope.row)"
              >修改</el-button
            >
            <el-button v-else disabled type="warning" size="small"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-base">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :page-size="filterQuery.size"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { GetCompany } from "../../../services/gettreedata";
import {
  GetLoginPerson,
  GetHSEEntriedList,
  DeleteHSEEntried,
  SubmitHSEEntried,
  } from "../../../services/hseAudit";



export default {
  data() {
    return {
      filterQuery: {
        userID: "",
        companyCode: "01",
        startDate: "",
        endDate: "",
        status: "",
        num: 1,
        size: 10,
      },
      table: [],
      companyTree: [],
      total: 0,
      problemLevel: [],
      problemCause: [],
      dangerLevel: [],
      employees: [],
      selectedData: [],
    };
  },
  mounted() {
    this.getPageData();
    this.handleSearch();
  },
  methods: {
    getPageData() {
      GetCompany().then((res) => {
        this.companyTree = res.data;
      });
      GetLoginPerson().then((res) => {
        this.filterQuery.userID = res.data.employeeID;
      });
    },
    handleSearch() {
      GetHSEEntriedList(this.filterQuery).then((res) => {
        this.total = res.data.total;
        this.table = res.data.list;
      });
    },
    handleEdit(row) {
      row = JSON.stringify(row);
      this.$router.push({
        path: "./editEntried",
        query: { row },
      });
    },
    handleSelectionChange(val) {
      this.selectedData = val.map((item) => item.qhseeCheckRecordID);
    },
    handleCurrentChange(page) {
      this.filterQuery.num = page;
      this.handleSearch();
    },
    handleBatchDelect() {
      this.$confirm("此操作将批量删除选中文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        callback: (action) => {
          if (action == "confirm") {
            DeleteHSEEntried(this.selectedData).then(() => {
              this.$message.success("批量删除成功！");
              this.handleSearch();
            });
          } else {
            this.$message.info("已取消删除");
          }
        },
      });
    },
    handleBatchSubmit() {
      this.$confirm("此操作将批量提交选中文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        callback: (action) => {
          if (action == "confirm") {
            this.selectedData = this.selectedData.join(',')
            SubmitHSEEntried({ids: this.selectedData}).then(() => {
              this.$message.success("批量提交成功！");
              this.handleSearch()
            })
          } else {
            this.$message.info("已取消提交");
          }
        },
      });
    },
    isSelect(row) {
      if (row.status == "暂存") {
        return true;
      }
      return false;
    },
  },
};
</script>

<style>
.el-table th {
  display: table-cell !important;
}
</style>